{% extends 'base.html' %}

<!-- base页 需要的变量 -->
{% set api_addr = tasks['api_addr'] %}
{% set pro_name_list = tasks['pro_name_list'] %}
{% set pro_num = tasks['pro_num'] %}

<!-- 当前页 需要的变量 -->
{% set pro_name = tasks['pro_name'] %}
{% set host_list = tasks['host_list'] %}
{% set global_variable_list = tasks['global_variable_list'] %}
{% set host = tasks['host'] %}
{% set global_variable_dict = tasks['global_variable_dict'] %}
{% set test_case_list = tasks['test_case_list'] %}
{% set test_time_list = tasks['test_time_list'] %}
{% set current_relation_list = tasks['current_relation_list'] %}
{% set tag_name_list = tasks['tag_name_list'] %}
{% set statist_data = tasks['statist_data'] %}
{% set interface_name_list = tasks['interface_name_list'] %}
{% set http_rt_list = tasks['http_rt_list'] %}
{% set bubble_list = tasks['bubble_list'] %}


{% block css %}
    <link href="/static/css/sweetalert.min.css" rel="stylesheet"/>
    <link href="/static/css/dataTables.bootstrap.css" rel="stylesheet"/>
    <link href="//unpkg.com/layui@2.6.7/dist/css/layui.css" rel="stylesheet"/>
{% endblock %}


{% block content %}

    <div id="page-wrapper">
        <div class="header" style="text-align: center">
            <h1 class="page-header"> API 报 告 - {{pro_name}}  </h1>
        </div>
        <div id="page-inner2" style="margin-top: 30px">
           <div class="row">
              <div class="col-lg-11 col-md-11 col-sm-11" style="margin-left:3%">
                  <div class="panel panel-info">
                        <div id="statist_data" class="panel-heading" align="left" style="font-size:20px; font-weight: bold;">
                            当 前 用 例 总 数（ <font color="#5B00AE">依 赖 : <label id="depend_num"> {{ statist_data['depend'] }}</label> &nbsp;&nbsp; 测 试 : <label id="test_num"> {{ statist_data['test'] }}</label></font> )  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            当 前 测 试 结 果  <  <font color="#5B4B00">总 计 : <label id="all_num"> {{ statist_data['success'] + statist_data['fail'] + statist_data['error'] }}</label></font>&nbsp;&nbsp;&nbsp;
                                                <font color="#008000">成 功 : <label id="success_num"> {{ statist_data['success'] }}</label></font>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <font color="#c23531">失 败 : <label id="fail_num"> {{ statist_data['fail'] }}</label></font>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <font color="#ca8622">错 误 : <label id="error_num"> {{ statist_data['error'] }}</label></font>&nbsp;&nbsp;&nbsp;>
                        </div>
                        <div class="panel-body">
                            <div class="card">
                                <div class="card-body card-padding">
                                    <div class="row" role="form">
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="fg-line">
                                                <input id="interface_name" name="interface_name" type="text" class="form-control" placeholder="接口名称">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">请求方式</span>
                                                <div class="fg-line">
                                                    <select class="form-control" id="request_method" name="request_method" style="text-align: center; text-align-last: center;">
                                                        <option value="">全部</option>
                                                        <option value="GET">GET</option>
                                                        <option value="POST">POST</option>
                                                        <option value="PUT">PUT</option>
                                                        <option value="DELETE">DELETE</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">运行方式</span>
                                                <div class="fg-line">
                                                    <select class="form-control" id="run_type" name="request_method" style="text-align: center; text-align-last: center;" onchange="screen_test_time('{{ pro_name }}')">
                                                        <option value="all">全部</option>
                                                        <option value="cron">定时任务</option>
                                                        <option value="manual">手动执行</option>
                                                        <option value="deploy">部署测试</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">测试时间</span>
                                                <div class="fg-line">
                                                    <select class="form-control" id="test_time" name="test_time" style="text-align: center; text-align-last: center;" onchange="screen_tag_name('{{ pro_name }}')">
                                                        {% if not test_time_list %}
                                                            <option value="">暂无数据</option>
                                                        {% else %}
                                                            {% for test_time in test_time_list %}
                                                                <option value="{{ test_time }}">{{ test_time }}</option>
                                                            {% endfor %}
                                                        {% endif %}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        {# 搜索 按钮 #}
                                        <div class="col-lg-2 col-md-2 col-sm-2" align="center">
                                            <button id="search_btn" class="btn btn-primary form-control" type="button" style="font-size:15px" onclick="search_case('{{ pro_name }}')"> 搜 索 </button>
                                        </div>

                                        {# 查看当前HOST #}
                                        <div class="col-lg-1 col-md-1 col-sm-1" align="center">
                                            <button class="btn btn-primary form-control" type="button" style="font-size:15px" data-toggle="modal" data-target="#show_host"> HOST </button>
                                        </div>
                                        {# 查看当前全局变量 #}
                                        <div class="col-lg-1 col-md-1 col-sm-1" align="center">
                                            <button class="btn btn-primary form-control" type="button" style="font-size:15px" data-toggle="modal" data-target="#show_global_variable"> 全局变量 </button>
                                        </div>

                                    </div>

                                    <div class="row" role="form" style="margin-top:10px">
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="fg-line">
                                                <input id="interface_url" name="interface_url" type="text" class="form-control" placeholder="接口地址">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">标签名称</span>
                                                <div class="fg-line">
                                                    <select class="form-control" id="tag_name" name="tag_name" style="text-align: center; text-align-last: center;">
                                                        <option value="">全部</option>
                                                        {% for tat_name in tag_name_list %}
                                                            <option value="{{ tat_name }}">{{ tat_name }}</option>
                                                        {% endfor %}
                                                        <option value="no_tag">无标签::N</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">用例类型</span>
                                                <div class="fg-line">
                                                    <select class="form-control" id="case_type" name="case_type" style="text-align: center; text-align-last: center;">
                                                        <option value="">全部</option>
                                                        <option value="depend">依赖</option>
                                                        <option value="test">测试</option>
                                                        <option value="relation">关联</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">测试结果</span>
                                                <div class="fg-line">
                                                    <select class="form-control" id="test_result" name="test_result" style="text-align: center; text-align-last: center;">
                                                        <option value="">全部</option>
                                                        <option value="success">成功</option>
                                                        <option value="fail">失败</option>
                                                        <option value="error">错误</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        {# 搜索 条数 #}
                                        <div class="col-lg-2 col-md-2 col-sm-2" align="center" style="color:#5B00AE; line-height:35px; font-size:20px;" id="search_case_num">共 {{ statist_data['depend'] + statist_data['test'] }} 条</div>
                                        {# 查看 关联变量 #}
                                        <div class="col-lg-1 col-md-1 col-sm-1" align="center">
                                            <button class="btn btn-primary form-control" type="button" style="font-size:15px" data-toggle="modal" data-target="#show_relation_variable"> 关联变量 </button>
                                        </div>
                                    </div>

                                    <div class="table-responsive" style="margin-top: 1%">
                                        <ul class="nav nav-pills nav-justified">
                                           <li id="case_li" role="presentation"><a id="case" href="javascript:" style="font-size:18px"> 测  试  详 情 </a></li>
                                           <li id="chart_li" role="presentation" class="active"><a id="chart" href="javascript:" style="font-size:18px"> 统  计  图  表 </a></li>
                                        </ul>

                                        <div id="case_area" style="display:none">
                                            <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th style="font-size:18px;">接口名称</th>
                                                <th style="font-size:18px;" class="text-center">方式</th>
                                                <th style="font-size:18px;">接口地址</th>
                                                <th style="font-size:18px;">验证字段</th>
                                                <th style="font-size:18px;" class="text-center">验证模式</th>
                                                <th style="font-size:18px;" class="text-center">状态</th>
                                                <th style="font-size:18px;" class="text-center">测试结果</th>
                                                <th style="font-size:18px;" class="text-center">测试时间</th>
                                            </tr>
                                            </thead>
                                            <tbody id="case_tbody">
                                            {% for test_case in test_case_list %}
                                                {% set _id = test_case["_id"] %}
                                                {% set interface_name = test_case["interface_name"] %}
                                                {% set request_method = test_case["request_method"] %}
                                                {% set request_header = test_case["request_header"] %}
                                                {% set interface_url = test_case["interface_url"] %}
                                                {% set request_params = test_case["request_params"] %}
                                                {% set request_body = test_case["request_body"] %}
                                                {% set compare_core_field_name_list = test_case["compare_core_field_name_list"] %}
                                                {% set expect_core_field_value_list = test_case["expect_core_field_value_list"] %}
                                                {% set expect_field_name_list = test_case["expect_field_name_list"] %}
                                                {% set verify_mode = test_case["verify_mode"] %}
                                                {% set is_depend = test_case["is_depend"] %}
                                                {% set depend_level = test_case["depend_level"] %}
                                                {% set depend_field_name_list = test_case["depend_field_name_list"] %}
                                                {% set depend_field_value_list = test_case["depend_field_value_list"] %}
                                                {% set actual_core_field_value_list = test_case["actual_core_field_value_list"] %}
                                                {% set actual_field_name_list = test_case["actual_field_name_list"] %}
                                                {% set case_status = test_case["case_status"] %}
                                                {% set exec_time = test_case["exec_time"] %}
                                                {% set test_result = test_case["test_result"] %}
                                                {% set tag_name = test_case["tag_name"] %}
                                                {% set upstream_relation_case = test_case["upstream_relation_case"] %}
                                                {% set downstream_relation_field_name_list = test_case["downstream_relation_field_name_list"] %}
                                                {% set is_relation = upstream_relation_case != "" or downstream_relation_field_name_list != [] %}
                                                <tr>
                                                    {# 接口名称（标签名称） #}
                                                    <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="标签名称" data-content="{{ tag_name }}">{{ interface_name }}
                                                        {% if is_depend %}<font color="#AE57A4">(依赖)</font>{% else %}{% if is_relation %}<font color="#6F00D2">[关联]</font>{% endif %}{% endif %}
                                                    </td>

                                                    {# 请求方式（请求头文件）#}
                                                    {% if request_header %}
                                                        <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="请求头文件" data-content="{{ request_header }}">{{ request_method }}</td>
                                                    {% else %}
                                                         <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;">{{ request_method }}</td>
                                                    {% endif %}

                                                    {# 接口地址（请求参数）#}
                                                    {% if not request_params and not request_body %}
                                                        <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;">{{ interface_url }}</td>
                                                    {% else %}
                                                        {% if request_method == "GET" %}
                                                            <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="请求参数" data-content="{{ request_params }}">{{ interface_url }}</td>
                                                        {% else %}
                                                            <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="请求正文体" data-content="{{ request_body }}">{{ interface_url }}</td>
                                                        {% endif %}
                                                    {% endif %}

                                                    {% if is_depend %}
                                                        {# 依赖字段值（依赖的字段名列表、依赖的字段值列表）#}
                                                        <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="字段名：{{ depend_field_name_list }}" data-content="字段值：{{ depend_field_value_list }}"><span style="font-size:14px" class="label label-info">依赖字段值</span></td>
                                                        {# 依赖等级（测试信息）#}
                                                        <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;" onclick="show_response_info('{{ pro_name }}', '{{ _id }}', '_result')" data-toggle="modal" data-target="#show_depend_response_info">依赖等级：{{ depend_level }}</td>
                                                    {% else %}
                                                        {# 验证关键字段（期望的关键字段值）#}
                                                        <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="期望的关键字段值" data-content="{{ expect_core_field_value_list }}">{{ compare_core_field_name_list }}</td>
                                                        {# 验证模式（测试信息）#}
                                                        <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;" onclick="show_response_info('{{ pro_name }}', '{{ _id }}', '_result')" data-toggle="modal" data-target="#show_test_response_info">
                                                            {% if verify_mode == 1 %} 仅关键字段 {% else %} 关键字段+响应字段列表 {% endif %}
                                                        </td>
                                                    {% endif %}

                                                    {# 用例状态 #}
                                                    <td class="text-center" style="width: 100px; display:table-cell; vertical-align:middle;" id="case_status_{{_id}}">
                                                    {% if case_status %}
                                                        <font color="#00A600">上线</font>
                                                    {% else %}
                                                        <font color="#DC143C">下线</font>
                                                    {% endif %}
                                                    </td>

                                                    {# 测试结果（测试结果信息）#}
                                                    <td class="text-center" style="width: 100px; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="测试结果信息" data-content="{{ test_result }}">
                                                        {% if is_depend %}
                                                            {% if "success" in test_result %}
                                                                <font color="#00A600"> 依赖成功 </font>
                                                            {% elif "fail" in test_result %}
                                                                <font color="#DC143C"> 依赖失败 </font>
                                                            {% elif "error" in test_result %}
                                                                <font color="#C6A300"> 配置错误 </font>
                                                            {% else %}
                                                            {% endif %}
                                                        {% else %}
                                                            {% if "依赖" in test_result%}
                                                                <span id="exec_result" style="font-size:14px" class="label label-warning"> 依赖错误 </span>
                                                            {% elif "success" in test_result %}
                                                                <span id="exec_result" style="font-size:14px" class="label label-success"> 测试成功 </span>
                                                            {% elif "fail" in test_result %}
                                                                <span id="exec_result" style="font-size:14px" class="label label-danger"> 测试失败 </span>
                                                            {% elif "error" in test_result %}
                                                                <span id="exec_result" style="font-size:14px" class="label label-warning"> 配置错误 </span>
                                                            {% else %}
                                                                <span id="exec_result" style="font-size:14px" class="label label-info"></span>
                                                            {% endif %}
                                                        {% endif %}
                                                    </td>

                                                    {# 执行时间 #}
                                                    <td class="text-center" style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;">{{ exec_time }}</td>

                                                </tr>
                                            {% endfor %}

                                            </tbody>

                                        </table>
                                        </div>

                                        <div id="chart_area">
                                            <div class="layui-row" style="margin-top:80px;">
                                                <div class="layui-col-md4" style="margin-left:6%;">
                                                    <!-- 测 试 结 果 饼 图 -->
                                                    <div id="pie_chart" style="width:500px;height:400px;"></div>
                                                </div>
                                                <div class="layui-col-md6 layui-col-md-offset1">
                                                    <!-- 相 应 时 间 柱 状 图 -->
                                                    <div id="bar_chart" style="width:600px;height:400px"></div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
              </div>
           </div>
        </div>
    </div>

    <!-- 回到顶部 -->
    <div style="position:fixed;right:50px; bottom:30px; width:20px; height:20px;cursor:pointer">
        <a href="#"><span class="glyphicon glyphicon-eject" style = "font-size:30px;" aria-hidden="true"></span></a>
    </div>

    <!-- 查看当前 HOST 模态框-->
    <div id="show_host" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h3 class="text-center">当 前 HOST</h3>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="text-center" style="margin-top:5px">
                        <label id="current_host" style="margin-left:5px;font-size:20px;" class="text-info"><font color="#5B00AE">{{ host }} </font></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看当前 全局变量 模态框 -->
    <div id="show_global_variable" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">当 前 全 局 变 量</h2>
                    </div>
                </div>

                <div id="current_global_variable" class="modal-body">
                    {% for key, value in global_variable_dict.items() %}
                        <div class="form-group" style="margin-top:5px">
                            <label style="margin-left:5px;font-size:20px;" class="text-info"><font color="#5B00AE">{{ key }}</font>&nbsp;&nbsp;->&nbsp;&nbsp;{{ value }}</label>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- 查看当前 关联变量 模态框 -->
    <div id="show_relation_variable" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">当 前 关 联 变 量</h2>
                    </div>
                </div>

                <div id="current_relation_variable" class="modal-body">
                    {% for case in current_relation_list %}
                        {% if case["downstream_relation_field_name_list"] %}
                            <div class="col-md-12" style="font-size:16px;color:#3A006F;margin-bottom:10px">{{ case['interface_name'] }} : {{ case['downstream_relation_field_name_list'] }} -> {{ case['downstream_relation_field_value_list'] }} </div>
                        {% else %}
                            <div class="col-md-12" style="font-size:16px;color:#3A006F;margin-bottom:10px">{{ case['interface_name'] }}</div>
                            <HR align="center" width="500" color="#987cb9" SIZE=1>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- 显示测依赖口响应信息 -->
    <div id="show_depend_response_info" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">依 赖 接 口 响 应 信 息</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label>ID：</label>
                        <label id="case_id_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>依赖接口：</label>
                        <label id="is_depend_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>接口名称：</label>
                        <label id="interface_name_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>接口地址：</label>
                        <label id="interface_url_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求方式：</label>
                        <label id="request_method_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求头文件：</label>
                        <label id="request_header_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求参数：</label>
                        <label id="request_params_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求正文体：</label>
                        <label id="request_body_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>用例状态：</label>
                        <label id="case_status_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>响应信息：</label>
                        <label id="response_info_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>依赖等级：</label>
                        <label id="depend_level_show_depend"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">依赖字段名列表：</font></label>
                        <label id="depend_field_name_list_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">依赖字段值列表：</font></label>
                        <label id="depend_field_value_list_show_depend"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">测试结果：</font></label>
                        <label id="test_result_show_depend"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label>更新时间：</label>
                        <label id="update_time_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>创建时间：</label>
                        <label id="create_time_show_depend"></label>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 显示测试接口响应信息 -->
    <div id="show_test_response_info" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">测 试 接 口 响 应 信 息</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label>ID：</label>
                        <label id="case_id_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>依赖接口：</label>
                        <label id="is_depend_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>接口名称：</label>
                        <label id="interface_name_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>接口地址：</label>
                        <label id="interface_url_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求方式：</label>
                        <label id="request_method_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求头文件：</label>
                        <label id="request_header_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求参数：</label>
                        <label id="request_params_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求正文体：</label>
                        <label id="request_body_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>用例状态：</label>
                        <label id="case_status_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>验证模式：</label>
                        <label id="verify_mode_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>响应状态码：</label>
                        <label id="http_code_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>响应时间(毫秒)：</label>
                        <label id="http_rt_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>响应信息：</label>
                        <label id="response_info_show_test"></label>
                    </div>

                    <hr />
                    <div class="form-group">
                        <label>上游关联用例：</label>
                        <label id="upstream_relation_case_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>下游关联字段名列表：</label>
                        <label id="downstream_relation_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>下游关联字段值列表：</label>
                        <label id="downstream_relation_field_value_list_show_test"></label>
                    </div>

                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">待比较关键字段名列表：</font></label>
                        <label id="compare_core_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">期望的关键字段值列表：</font></label>
                        <label id="expect_core_field_value_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">实际的关键字段值列表：</font></label>
                        <label id="actual_core_field_value_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">关键字段值比较结果：</font></label>
                        <label id="result_core_field_value_show_test"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">期望的响应字段列表：</font></label>
                        <label id="expect_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">实际的响应字段列表：</font></label>
                        <label id="actual_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">响应字段列表比较结果：</font></label>
                        <label id="result_field_name_list_show_test"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">测试结果：</font></label>
                        <label id="test_result_show_test"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label>更新时间：</label>
                        <label id="update_time_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>创建时间：</label>
                        <label id="create_time_show_test"></label>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script src="/static/js/common.js" type="text/javascript"></script>
    <script src="/static/js/report.js" type="text/javascript"></script>
    <script src="/static/js/sweetalert.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="/static/js/dataTables.bootstrap.js" type="text/javascript"></script>
    <script src="/static/js/echarts.min.js" type="text/javascript"></script>   <!-- 引入 ECharts 文件 -->
    <script src="//unpkg.com/layui@2.6.7/dist/layui.js"></script>

    <!-- 导 航 切 换 -->
    <script>
        $("#chart").click(function () {
            $("#chart_li").attr("class","active");
            $("#chart_area").show();
            $("#case_li").removeAttr("class");
            $("#case_area").hide();
        });
        $("#case").click(function () {
            $("#case_li").attr("class","active");
            $("#case_area").show();
            $("#chart_li").removeAttr("class");
            $("#chart_area").hide();
        });
    </script>

    <script>
        {# 显示 饼图、柱状图 #}
        $(document).ready(function() {
            show_pie_chart({{ statist_data['success'] }}, {{ statist_data['fail'] }}, {{ statist_data['error'] }});
            show_bar_chart({{ interface_name_list | tojson}}, {{ http_rt_list | tojson }}, {{ bubble_list | tojson }});
        });
        {# 激活 气泡弹层 #}
        $(function (){$("[data-toggle='popover']").popover();});
        {# 设置埋点，控制台显示页面的 '白屏时间' #}
        console.log("页面白屏时间 : " + (performance.timing['responseStart'] - performance.timing['navigationStart']).toString())
    </script>
{% endblock %}
